<template>
  <div class="container" v-touch:left.stop="back">
    <!-- 搜索框 -->
    <van-search @keydown.enter="Search" @cancel="back" v-model="value" placeholder="想找什么,请输入" show-action fixed>
    </van-search>
    <div v-if="!value">
      <!-- 标签栏 -->
      <van-tabs v-model="active" swipeable title-active-color="#ee0a24">
        <van-tab title="菜谱" />
        <van-tab title="食材" />
        <van-tab title="笔记" />
        <van-tab title="专题" />
        <van-tab title="菜单" />
        <van-tab title="会员" />
      </van-tabs>
      <!-- 标签 -->
      <div class="tag">
        <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">红烧肉</van-tag>
        <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">可乐鸡翅</van-tag>
        <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">糖醋排骨</van-tag>
        <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">红烧排骨</van-tag>
        <van-tag style="margin: 5px" size="large" color="#f0f0f4" text-color="#333">小龙虾</van-tag>
      </div>
    </div>

    <div v-else>
      <!-- 卡片列表 -->
      <van-card
        
        :thumb="item.rpic"
        v-for="(item, index) in recipe"
        :key="index"
        style="background-color: #fff; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%)"
        @click="$router.push(`/Detail/${item.id}`)"
      >
        <template #title>
          <div class="title" style="font-size: 16px">{{ item.rec_name }}</div>
        </template>
        <template #desc>
          <div class="desc">{{ item.desc }}</div>
        </template>
        <template #footer>
          <div style="color: #aaa">
            <!-- 点赞 -->
            <span style="display: inline-block; margin: 0 10px 0 20px">{{ item.like_num }}</span>
            <van-icon size="16" name="good-job-o" />
            <!-- 收藏 -->
            <span style="display: inline-block; margin: 0 10px 0 20px">{{ item.clt_num }}</span>
            <van-icon size="16" name="star-o" />
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tagShow: true,
      value: '',
      isLoading: false,
      recipe: [],
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    Search() {
      this.$axios.get(`/cuisines/search/${this.value}`).then((res) => {
        console.log(res.data.data)
        this.recipe = res.data.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.tag {
  margin: 20px;
}
.title {
  margin: 5px 0 10px 0;
  width: 249px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.6em !important;
  font-weight: 700;
}
.desc {
  font-size: 1.2em;
  width: 60vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #aaa;
}
</style>
